<template>
  <div class="bg">
    <div class="bxaa">
      <div class="bxaa1">
        <RadioGroup v-model="type" type="button" @on-change="radioChange">
          <Radio :label="name" v-for="(name, index) in typeList" :key="index"></Radio>
        </RadioGroup>
      </div>
      <div style="float: left;width: 1%;"></div>
      <div style="float: left;width: 14%;">
        <!--   <Form :label-width="80">
             <FormItem label="所属工厂">
               <Select v-model="factory" @on-change="selectChange">
                 <Option v-for="item in spaceList" :value="item.label" :key="item.value">{{ item.label }}</Option>
               </Select>
             </FormItem>
           </Form>-->
      </div>
      <div style="float: left;width: 64%;">
      </div>
    </div>
    <Card class="cardStyle" dis-hover>
      <div class="ggx">
        <div class="treePart">
          <Card :bordered="false">
            <p slot="title">行政层级数据</p>
            <div class="treeBody">
              <Tree :data="tree" :render="renderContent"></Tree>
              <Spin size="large" fix v-if="switches.spinShow"></Spin>
            </div>
          </Card>
        </div>
        <div class="editPart">
          <Card :bordered="false">
            <p slot="title">{{showEditName}} <span style="color: #f00;float: right">架构 ID：{{treeId}}</span></p>
            <Row :gutter="20" style="height: 920px;">
              <Col span="12">
                <Form ref="space" :model="space" :label-width="150" :rules="ruleValidate">
                  <FormItem label="父节点" v-show="fatherObj.name">
                    <Input v-model="fatherObj.name" placeholder="空间名称..." disabled></Input>
                  </FormItem>
                  <FormItem label="名称" prop="name">
                    <Input v-model="space.name" placeholder="空间名称..."></Input>
                  </FormItem>
                  <FormItem label="层级">
                    <Select v-model="space.level" placeholder="必须准确填写所属的 层级" :disabled="true">
                      <Option v-for="(id, index) in levelList" :key="index" :value="id">{{id}}</Option>
                    </Select>
                  </FormItem>
                  <FormItem label="排序" prop="sort">
                    <InputNumber v-model="space.sort" placeholder="排序" :min="1" :max="50"></InputNumber>
                  </FormItem>
                  <FormItem label="属性" prop="sort">
                    <Tabs type="card" @on-click="tabClick" v-model="tabvalue">
                      <TabPane label="计量" style="height: 630px;" name="计量">
                        <Row :gutter="10">
                          <Col span="18">
                            <Input v-model="space.props.length === 0 ? '未关联属性' : '已关联' +space.props.length + '个属性'"
                                   :disabled="true">
                              <Button slot="append" @click="doSelectDev(space.props.length)">选择属性</Button>
                            </Input>
                          </Col>
                          <Col span="6">
                            <Button @click="doEmptyDev(1)" long>清空属性</Button>
                          </Col>
                        </Row>
                        <br>
                        <Row>
                          <div class="sion">
                            <div class="selCard" v-for="(ite, index) in space.props" :key="index">
                              <h4 class="honll">
                                <Poptip trigger="hover" content="content" placement="right"
                                        @on-popper-show="doShowTip(ite.devId)" @on-popper-hide="doHideTip">
                                  设备编号: {{ite.snName}} &nbsp;&nbsp;({{ite.virtualItem ? '虚拟': '真实'}})
                                  <div class="apii" slot="content">
                                    <Spin fix v-show="switches.tipLoading">加载中...</Spin>
                                    <p>设备名称: {{tipDev.name}}</p>
                                    <p>设备编号: {{tipDev.sn}}</p>
                                    <p>设备类型: {{tipDev.iotDevType? tipDev.iotDevType.useType : '&#45;&#45;'}}</p>
                                    <p>设备品牌: {{tipDev.iotDevType? tipDev.iotDevType.brand : '&#45;&#45;'}}</p>
                                    <p>设备空间: {{tipDev.iotSpace? tipDev.iotSpace.name : '&#45;&#45;'}}</p>
                                  </div>
                                </Poptip>
                                <Icon type="md-remove-circle" class="icc" @click="delCard(index, 1)"/>
                              </h4>
                              <div>关联属性: {{ite.proName}}</div>
                              <div style="display:flex;">
                                <p style="width:60px; line-height: 20px;">计算关系:</p>
                                <div
                                  style="width: 100%; overflow-y: scroll; line-height:20px; height: 45px; padding-left: 6px;">
                                  {{ite.virtualItem? (ite.virtualItem.formula ? ite.virtualItem.formula : '--') :'--'}}
                                </div>
                              </div>
                              <div style="height: 20px;">属性类型：
                                <Input v-model="ite.fieldType" placeholder="请输入..." style="width: 300px"/>
                              </div>
                            </div>
                          </div>
                        </Row>

                      </TabPane>
                      <TabPane label="能耗" name="能耗">
                        <Row :gutter="10">
                          <Col span="18">
                            <Input v-model="space.props2.length === 0 ? '未关联属性' : '已关联' +space.props2.length + '个属性'"
                                   :disabled="true">
                              <Button slot="append" @click="doSelectDev(space.props2.length)">选择属性</Button>
                            </Input>
                          </Col>
                          <Col span="6">
                            <Button @click="doEmptyDev(2)" long>清空属性</Button>
                          </Col>
                        </Row>
                        <br>
                        <Row>
                          <div class="sion">
                            <div class="selCard" v-for="(ite, index) in space.props2" :key="index">
                              <h4 class="honll">
                                <Poptip trigger="hover" content="content" placement="right"
                                        @on-popper-show="doShowTip(ite.devId)" @on-popper-hide="doHideTip">
                                  设备编号: {{ite.snName}} &nbsp;&nbsp;({{ite.virtualItem ? '虚拟': '真实'}})
                                  <div class="apii" slot="content">
                                    <Spin fix v-show="switches.tipLoading">加载中...</Spin>
                                    <p>设备名称: {{tipDev.name}}</p>
                                    <p>设备编号: {{tipDev.sn}}</p>
                                    <p>设备类型: {{tipDev.iotDevType? tipDev.iotDevType.useType : '&#45;&#45;'}}</p>
                                    <p>设备品牌: {{tipDev.iotDevType? tipDev.iotDevType.brand : '&#45;&#45;'}}</p>
                                    <p>设备空间: {{tipDev.iotSpace? tipDev.iotSpace.name : '&#45;&#45;'}}</p>
                                  </div>
                                </Poptip>
                                <Icon type="md-remove-circle" class="icc" @click="delCard(index, 2)"/>
                              </h4>
                              <div>关联属性: {{ite.proName}}</div>
                              <div style="display: flex;">
                                <p style="width: 60px; line-height: 20px">计算关系:</p>
                                <div
                                  style="width: 100%; overflow-y: scroll; line-height: 20px; height: 45px; padding-left: 6px;">
                                  {{ite.virtualItem? (ite.virtualItem.formula ? ite.virtualItem.formula : '&#45;&#45;')
                                  :
                                  '&#45;&#45;'}}
                                </div>
                              </div>
                              <div style="height: 20px;">属性类型：
                                <Input v-model="ite.fieldType" placeholder="请输入..." style="width: 300px"/>
                              </div>
                            </div>
                          </div>
                        </Row>
                      </TabPane>
                    </Tabs>
                  </FormItem>
                </Form>
                <Row style="text-align: right; margin-top: -40px;">
                  <Button type="primary" @click="saver" style="width: 200px;" :loading="switches.saveingButton">保存
                  </Button>
                </Row>
              </Col>
              <Col span="12">
                <Card :bordered="false">
                  <p slot="title">局部设备关系</p>
                  <div style="height: 800px;overflow-y: auto;width: 100%;position: relative;">
                    <Tree :data="tree2" :render="renderContent2" class="xsaaa"></Tree>
                  </div>
                </Card>
              </Col>
            </Row>
          </Card>
        </div>
      </div>
    </Card>
    <Drawer title="选择关联设备" placement="left" :mask-closable="false" v-model="switches.leftDrawer" width="800"
            @on-visible-change="drawerStatus">
      <div class="dxx">
        <Row :gutter="20">
          <Col span="12">
            <Input v-model="pageable.param" prefix="ios-search-outline" placeholder="搜索内容" @on-enter="doQuery"/>
          </Col>
          <Col span="12" style="text-align: right">
            <RadioGroup v-model="devType" type="button" @on-change="radioChangeDev">
              <Radio label="真实设备"></Radio>
              <Radio label="虚拟设备"></Radio>
            </RadioGroup>
          </Col>
        </Row>
        <div class="ooa">
          <Table stripe :columns="columns1" :data="data1" size="small" :loading="switches.tableLoading"
                 height="600"></Table>
          <div class="pagg">
            <Page :current="pageable.page" :page-size="pageable.size" :total="total" simple @on-change="pageChange"/>
          </div>
        </div>
        <div class="dzss">
          <H4>已选属性：</H4>
          <Table stripe :columns="selColumns" :data="selectDatas" size="small" height="200"></Table>
          <Row style="text-align: right;margin-top: 15px;">
            <Button type="primary" @click="doFinishSelected" style="width: 200px;text-align: center">完成选择</Button>
          </Row>
        </div>
      </div>
    </Drawer>
  </div>
</template>

<script>
  export default {
    name: 'EnergySpace',
    mounted: function () {
      // this.loadFactoryList()
      this.radioChange()
    },
    data() {
      return {
        switches: {
          spinShow: false,
          leftDrawer: false,
          tableLoading: false,
          tipLoading: false,
          saveingButton: false
        },
        devType: '真实设备',
        tabvalue: '计量',
        showEditName: '编辑层级数据',
        treeId: null,
        pageable: {
          page: 1,
          size: 30,
          type: 0,
          param: ''
        },
        columns1: [
          {
            title: 'ID',
            width: 80,
            fixed: 'left',
            key: 'devId'
          },
          {
            title: '属性名称',
            key: 'proName',
            fixed: 'left',
            ellipsis: true,
            tooltip: true,
            align: 'center'
          },
          {
            title: '设备名称',
            key: 'devName',
            width: 200,
            ellipsis: true,
            tooltip: true,
            align: 'center'
          },
          {
            title: '设备编号',
            key: 'snName',
            width: 120,
            ellipsis: true,
            tooltip: true,
            align: 'center'
          },
          {
            title: '设备空间',
            key: 'spaceName',
            ellipsis: true,
            tooltip: true,
            align: 'center'
          },
          {
            title: '操作',
            key: 'action',
            fixed: 'right',
            width: 100,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'info',
                    ghost: true,
                    size: 'small',
                    icon: 'ios-create-outline'
                  },
                  style: {
                    margin: '3px'
                    // color: '#2db7f5'
                  },
                  on: {
                    click: () => {
                      this.doCopy(params.row)
                    }
                  }
                }, '选择')
              ])
            }
          }
        ],
        selColumns: [
          {
            title: 'ID',
            width: 80,
            fixed: 'left',
            key: 'devId'
          },
          {
            title: '属性名称',
            key: 'proName',
            fixed: 'left',
            ellipsis: true,
            tooltip: true,
            align: 'center'
          },
          {
            title: '设备名称',
            key: 'devName',
            width: 200,
            ellipsis: true,
            tooltip: true,
            align: 'center'
          },
          {
            title: '设备编号',
            key: 'snName',
            width: 120,
            ellipsis: true,
            tooltip: true,
            align: 'center'
          },
          {
            title: '设备空间',
            key: 'spaceName',
            ellipsis: true,
            tooltip: true,
            align: 'center'
          },
          {
            title: '操作',
            key: 'action',
            fixed: 'right',
            width: 100,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'info',
                    ghost: true,
                    size: 'small',
                    icon: 'ios-create-outline'
                  },
                  style: {
                    margin: '3px'
                    // color: '#2db7f5'
                  },
                  on: {
                    click: () => {
                      this.doRemove(params.row._index)
                    }
                  }
                }, '移除')
              ])
            }
          }
        ],
        total: 0,
        activeTabType: 1,
        data1: [],
        tipDev: {},
        selectDatas: [],
        type: '电',
        factory: '',
        typeList: ['模板', '电', '水', '中水', '冷量', '燃气', '蒸汽', '压缩空气', '碳排', '成本', '总览'],
        levelList: [1, 2, 3, 4, 5, 6],
        spaceList: [],
        fatherObj: {},
        space: {
          props: [
            {
              devId: '',
              snName: '',
              virtualItem: '',
              spaceName: '',
              devTypeName: '',
              fieldType: ''
            }
          ],
          props2: []
        },
        tree: [],
        tree2: [],
        ruleValidate: {
          name: [
            {required: true, message: '不能为空......', trigger: 'blur'}
          ]
        }
      }
    },
    methods: {
      tabClick: function (name) {
        if (name === '计量') {
          this.activeTabType = 1
        }
        if (name === '能耗') {
          this.activeTabType = 2
        }
        this.tabvalue = name
      },
      loadFactoryList: function () {
        let getData = {
          'size': 100,
          'page': 0,
          type_lte: 2
        }
        window.myapi.space_list(getData).then(res => {
          if (res.data.status === 200) {
            if (res.data.data.content.length === 0) {
              this.$Message.info('查询无工厂数据，请检测空间数据或是否设置了工厂层级')
              return
            }
            this.spaceList = res.data.data.content
            // this.factory = this.spaceList[0].label
            // 郑州项目暂指定郑州工厂为默认的工厂
            this.factory = 'ZZ'
            this.loadTreeDatas()
          } else {
            let msg = res.data.msg ? res.data.msg : '请求数据失败!'
            this.$Message.error({content: msg, duration: 5, closable: true})
          }
        }).catch(function (e) {
        })
      },
      loadTreeDatas () {
        this.tree = []
        this.switches.spinShow = true
        window.myapi.do_post('ens/ecss', {type: this.type}).then(resp => {
          if (resp.status === 200) {
            this.tree = resp.data.data
            if (this.tree.length === 0) {
              this.$Notice.info({
                title: '通知',
                desc: '该工厂下无匹配数据'
              })
              this.space = {
                level: 1,
                props: [],
                props2: []
              }
            } else {
              this.treeId = this.tree[0].id
              this.space = {
                props: [],
                props2: []
              }
            }
          } else {
            this.$Notice.error({
              title: '通知',
              desc: resp.data.msg
            })
          }
        }).catch(error => {
        }).finally(() => {
          this.switches.spinShow = false
        })
      },
      doCopy: function (row) {
        /*     if (this.selectDatas.length === 2 && this.activeTabType === 1) {
               this.$Message.info('计量暂时只支持关联两个属性')
               return
             }*/
        let selObj = JSON.parse(JSON.stringify(row))
        if (selObj.virtualId) {
          selObj['virtualItem'] = {
            id: selObj.virtualId
          }
        }
        selObj = {...selObj, ...{fieldType: ''}}
        // this.selectDatas.push(selObj)
        this.$set(this.selectDatas, this.selectDatas.length, selObj)
        // console.log(this.selectDatas)
      },
      doFinishSelected: function () {
        // 完成选择按钮，迁移数据
        if (this.selectDatas.length > 0) {
          // 计量属性
          if (this.activeTabType === 1) {
            if (this.space.props.length > 0) {
              // 跟已选择区域的属性对比，判断当前所选的设备是否跟已选设备同属一个设备
              let tagetDevId = this.space.props[0].devId
              /*   for (let i = 0; i < this.selectDatas.length; i++) {
                   if (this.selectDatas[i].devId !== tagetDevId) {
                     this.$Message.info('检测到所选择属性与原属性不属于同一个设备，请选择同一个设备的属性')
                     return
                   }
                 }*/
            } else {
              let tagetDid = this.selectDatas[0].devId
              /*     for (let i = 0; i < this.selectDatas.length; i++) {
                     if (this.selectDatas[i].devId !== tagetDid) {
                       this.$Message.info('检测到所选择属性不属于同一个设备，请选择同一个设备的属性')
                       return
                     }
                   }*/
            }
            /*      if ((this.space.props.length + this.selectDatas.length) > 2) {
                    this.$Message.info('所选择的属性总树不能超过2')
                    return
                  }*/
            this.selectDatas.map(item => {
              this.$set(item, 'type', this.activeTabType)
            })
            // console.log(this.selectDatas)
            this.space.props.push(...this.selectDatas)
          }

          // 能耗属性
          if (this.activeTabType === 2) {
            // 跟已选择区域的属性对比，判断当前所选的设备是否跟已选设备同属一个设备
            // todo 能耗属性不检测
            /*if (this.space.props2.length > 0) {
              let tagetDevId = this.space.props2[0].devId
              for (let i = 0; i < this.selectDatas.length; i++) {
                if (this.selectDatas[i].devId !== tagetDevId) {
                  this.$Message.info('检测到所选择属性与原属性不属于同一个设备，请选择同一个设备的属性')
                  return
                }
              }
            } else {
              let tagetDid = this.selectDatas[0].devId
              for (let i = 0; i < this.selectDatas.length; i++) {
                if (this.selectDatas[i].devId !== tagetDid) {
                  this.$Message.info('检测到所选择是属性不属于同一个设备，请选择同一个设备的属性')
                  return
                }
              }
            }*/
            // 能耗属性不限制条数222
            /*   if ((this.space.props2.length + this.selectDatas.length) > 2) {
               this.$Message.info('所选择的属性总树不能超过2')
               return
             }*/
            this.selectDatas.map(item => {
              this.$set(item, 'type', this.activeTabType)
            })
            this.space.props2.push(...this.selectDatas)
          }
        }
        this.switches.leftDrawer = false
        this.selectDatas = []
        this.devType = '虚拟设备'
        this.pageable = {
          page: 1,
          size: 30,
          type: 1,
          param: ''
        }
      },
      doRemove: function (index) {
        this.selectDatas.splice(index, 1)
      },
      // loadDevDatas () {
      //   if (this.devList.length === 0) {
      //     window.myapi.dev_list({size: 99999999}).then(resp => {
      //       if (resp.status === 200 && resp.data.status === 200) {
      //         this.devList = resp.data.data.content
      //       }
      //     }).finally(() => {
      //     })
      //   }
      // },
      pageChange: function (index) {
        this.pageable.page = index
        this.loadDatas()
      },
      drawerStatus: function (status) {
        if (status) {
          this.loadDatas()
        } else {
          this.selectDatas = []
          this.devType = '虚拟设备'
          this.pageable = {
            page: 1,
            size: 30,
            type: 1,
            param: ''
          }
        }
      },
      radioChangeDev: function (txt) {
        if (txt === '真实设备') {
          this.pageable.type = 0
        } else {
          this.pageable.type = 1
        }
        this.pageable.page = 1
        this.loadDatas()
      },
      doQuery: function () {
        this.pageable.page = 1
        this.loadDatas()
      },
      loadDatas() {
        this.data1 = []
        this.switches.tableLoading = true
        // 加载数据
        window.myapi.do_post('iot/dev/virs', this.pageable).then(resp => {
          if (resp.status === 200 && resp.data.status === 200) {
            let result = resp.data.data
            this.total = result.total
            if (result.list.length > 0) {
              this.data1 = result.list
            }
          }
        }).finally(() => {
          this.switches.tableLoading = false
        })
      },
      selectChange(name) {
        this.makeDefault()
        this.loadTreeDatas()
        this.fatherObj = {}
        this.tree2 = []
      },
      radioChange(name) {
        this.makeDefault()
        this.loadTreeDatas()
        this.fatherObj = {}
        this.tree2 = []
      },
      doSelectDev(len) {
        // if (len === 2 && this.activeTabType === 1) {
        //   this.$Message.info('已选择两个属性，不能再选了')
        //   return
        // }
        this.switches.leftDrawer = true
      },
      doHideTip() {
        this.tipDev = {}
      },
      doShowTip(id) {
        this.switches.tipLoading = true
        window.myapi.do_get('/iot/dev/info?id= ' + id).then(resp => {
          if (resp.status === 200 && resp.data.status === 200) {
            this.tipDev = resp.data.data
          } else {
            this.$Notice.error({
              title: '通知',
              desc: resp.data.msg
            })
          }
        }).catch(error => {
        }).finally(() => {
          this.switches.tipLoading = false
        })
      },
      doEmptyDev(index) {
        if (index === 1) {
          this.space.props = []
        } else {
          this.space.props2 = []
        }
      },
      delCard(index, type) {
        this.$Modal.confirm({
          title: '确认操作',
          content: '您确定移除关联属性吗?',
          onOk: () => {
            if (type === 1) {
              this.space.props.splice(index, 1)
            }
            if (type === 2) {
              this.space.props2.splice(index, 1)
            }
          },
          okText: '确定',
          cancelText: '取消',
          onCancel: () => {
          }
        })
      },
      del(ids) {
        window.myapi.do_del('ens/del', ids).then(resp => {
          if (resp.status === 200 && resp.data.status === 200) {
            this.$Notice.success({
              title: '通知',
              desc: '操作成功'
            })
            this.loadTreeDatas()
            this.makeDefault()
          } else {
            this.$Notice.error({
              title: '通知',
              desc: resp.data.msg
            })
          }
        }).catch(error => {
        }).finally(() => {
        })
      },
      isRepeat(arr) {
        var hash = {}
        for (let i in arr) {
          if (hash[arr[i]]) {
            return true
          }
          hash[arr[i]] = true
        }
        return false
      },

      isEmpty(space) {
        for (let i = 0; i < space.length; i++) {
          if (space[i].fieldType === '') {
            return false
          }
        }
        return true
      },
      saver() {
        if (this.tree.length === 0) {
          this.space.pid = 0
        }
        if (!this.space.sort) {
          this.space.sort = 1
        }
        let url = ''
        let method = ''
        if (this.space.id) {
          url = 'ens/upd'
          method = 'PUT'
        } else {
          url = 'ens/save'
          method = 'POST'
          if (this.fatherObj.id) {
            // console.log(this.fatherObj)
            this.space.pid = this.fatherObj.id
            this.space.factory = this.fatherObj.factory
          }
        }
        if (this.tree.length !== 0 && !this.space.pid && !this.space.id) {
          this.$Message.info('选择父数据！')
          return
        }
        // this.space.factory = this.factory
        this.space.type = this.type
        this.$refs['space'].validate((valid) => {
          if (valid) {
            // 判断 数组里面 俩个 是否 一样 以及 不能为空
            // let copyId = this.space.props.map(v => v.fieldType)
            // let copyId2 = this.space.props2.map(v => v.fieldType)
            // else if (this.isRepeat(copyId) || this.isRepeat(copyId2)) {
            //     this.$Message.info('属性类型必须是唯一的')
            //     return false
            //   }
            if (!this.isEmpty(this.space.props) || !this.isEmpty(this.space.props2)) {
              this.$Message.info('请输入属性类型')
              return false
            } else {
              this.switches.saveingButton = true
              this.space = {...this.space, ...{props: [...this.space.props, ...this.space.props2]}}
              // console.log(this.space)
              window.myapi.put_post(url, this.space, method).then(resp => {
                if (resp.status === 200 && resp.data.status === 200) {
                  this.$Notice.success({
                    title: '通知',
                    desc: '操作成功'
                  })
                  this.loadTreeDatas()
                  this.makeDefault()
                } else {
                  this.$Notice.error({
                    title: '通知',
                    desc: resp.data.msg
                  })
                }
              }).catch(error => {
              }).finally(() => {
                this.switches.saveingButton = false
              })
            }
          }
        })
      },
      makeDefault: function () {
        this.space = {
          props: [],
          props2: []
        }
        this.tabvalue = '计量'
        this.fatherObj = {}
      },
      renderContent(h, {root, node, data}) {
        return h('span', {
          style: {
            display: 'inline-block',
            width: '100%'
          }
        }, [
          h('span', [
            h('Icon', {
              props: {
                type: 'ios-paper-outline'
              },
              style: {
                marginRight: '8px',
                fontSize: '14px',
                lineHeight: '20px'
              }
            }),
            h('span', {
              style: {
                marginRight: '8px',
                fontSize: '14px',
                lineHeight: '20px',
                cursor: 'pointer'
              },
              on: {
                click: (event) => {
                }
              }
            }, data.name)
          ]),
          h('span', {
            style: {
              display: 'inline-block',
              float: 'right',
              marginRight: '32px'
            }
          }, [
            h('Button', {
              props: Object.assign({}, this.buttonProps, {
                icon: 'md-add'
              }),
              style: {
                marginRight: '4px',
                height: '20px',
                padding: '0px 15px'
              },
              on: {
                click: () => {
                  this.treeId = data.id
                  this.fatherObj = JSON.parse(JSON.stringify(data))
                  this.showEditName = '新增层级数据'
                  this.space = {
                    level: this.fatherObj.level + 1,
                    props: [],
                    props2: []
                  }
                  // this.tabvalue = '计量'
                }
              }
            }),
            h('Button', {
              props: Object.assign({}, this.buttonProps, {
                icon: 'ios-create-outline'
              }),
              style: {
                marginRight: '4px',
                height: '20px',
                padding: '0px 15px'
              },
              on: {
                click: () => {
                  this.treeId = data.id
                  this.space = JSON.parse(JSON.stringify(data))
                  // 区分显示 计量属性还是 能耗属性
                  if (this.space.props.length > 0) {
                    let pro1 = this.space.props.filter(hell => hell.type === 2)
                    let pro2 = this.space.props.filter(hell => hell.type === 1)
                    this.$set(this.space, 'props2', pro1)
                    this.space.props = pro2
                    // this.space.props2 = pro1
                  } else {
                    this.$set(this.space, 'props2', [])
                  }
                  // this.tabvalue = '计量'
                  this.tree2 = [this.space]
                  this.fatherObj = {}
                  this.showEditName = '编辑层级数据'
                }
              }
            }),
            h('Button', {
              props: Object.assign({}, this.buttonProps, {
                icon: 'md-remove'
              }),
              style: {
                marginRight: '4px',
                height: '20px',
                padding: '0px 15px'
              },
              on: {
                click: () => {
                  this.$Modal.confirm({
                    title: '删除确认',
                    content: '<p>确认要删除该空间以及其所有子孙空间吗？</p>',
                    onOk: () => {
                      this.del([data.id])
                    },
                    onCancel: () => {
                    }
                  })
                }
              }
            })
          ])
        ])
      },
      renderContent2(h, {root, node, data}) {
        return h('span', {
          style: {
            display: 'inline-block',
            width: '100%'
          }
        }, [
          h('span', [
            h('Icon', {
              props: {
                type: 'ios-paper-outline'
              },
              style: {
                marginRight: '8px',
                fontSize: '14px',
                lineHeight: '20px'
              }
            }),
            h('span', {
              style: {
                marginRight: '8px',
                fontSize: '14px',
                lineHeight: '20px',
                cursor: 'pointer'
              },
              on: {
                click: (event) => {
                }
              }
            }, data.props.length > 0 ? data.props[0].snName : '未关联')
          ])
        ])
      }
    }
  }
</script>

<style scoped>
  .bg {
    padding: 5px 0px;
  }

  .cardStyle {
    margin-top: 5px;
    height: auto;
    width: 100%;
    position: absolute;
    background: rgb(240, 242, 245);
  }

  .ddz2 {
    display: flex;
  }

  .ddz3 {
    flex: 1;
  }

  .ddx8 {
    flex: 0 0 50px;
    line-height: 32px;
    text-align: right;
    padding-right: 10px;
  }

  .ggx {
    display: inline-flex;
    width: 100%;
  }

  .treePart {
    width: 30%;
    position: relative;
    border: solid 1px #faf4f4;
    border-radius: 3px;
    height: 100%;
  }

  .treeBody {
    width: 100%;
    position: relative;
    overflow-y: auto;
    height: 920px;
    padding: 0px 15px;
  }

  .editPart {
    width: 69%;
    margin-left: 1%;
    height: 100%;
    position: relative;
  }

  .selCard {
    width: 100%;
    height: 150px;
    border-radius: 4px;
    background: rgb(240, 242, 245);
    margin: 0px auto;
    padding: 0px 15px;
    margin-top: 10px;
  }

  .sion {
    overflow-y: auto;
    height: 500px;
  }

  /*滚动条样式11*/
  .sion::-webkit-scrollbar, .treeBody::-webkit-scrollbar { /*滚动条整体样式*/
    width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 4px;
  }

  .sion::-webkit-scrollbar-thumb, .treeBody::-webkit-scrollbar-thumb { /*滚动条111里面小方块*/
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: rgba(0, 0, 0, 0.2);
  }

  .sion::-webkit-scrollbar-track, .treeBody::-webkit-scrollbar-track { /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 0;
    background: rgba(0, 0, 0, 0.1);
  }

  .honll {
    border-bottom: dashed lightgrey 1px;
  }

  .dxx {
    padding: 0px 20px;
  }

  .ooa {
    margin-top: 10px;
  }

  .pagg {
    margin-top: 5px;
    text-align: right;
  }

  .dzss {
    margin-top: 10px;
  }

  .icc {
    float: right;
    font-size: 20px;
    margin-top: 5px;
    cursor: pointer;
  }

  .apii {
    height: 100px;
  }

  .bxaa {
    width: 100%;
    height: 33px;
    padding: 0px 15px;
  }

  .bxaa1 {
    float: left;
    width: 30%;
  }

</style>

<style>
  .xsaaa ul li ul {
    padding: 0 0 0 50px;
  }
</style>
